<template>
  <el-form ref="form" label-width="80px" v-if="formOne.id">
    <!--------- input ---------->
    <div v-if="formOne.type == 'input'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <el-form-item label="框内说明">
        <el-input v-model="formOne.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="formOne.is_required" @change="isSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
    </div>
    <!--------- select ---------->
    <div v-else-if="formOne.type == 'select'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="formOne.is_required" @change="isSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
    </div>
    <!--------- textarea ------------>
    <div v-else-if="formOne.type == 'textarea'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <el-form-item label="框内说明">
        <el-input v-model="formOne.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="formOne.is_required" @change="isSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
    </div>
    <!------------- switch -------------->
    <div v-else-if="formOne.type == 'switch'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <div v-if="formOne.name == 'is_fee'">
        <!-----再存一组数据，再建一张表------>
        <el-form-item label="收费方式">
          <el-switch
              v-model="formOne.is_required"
              @change="isSwitch"
          ></el-switch>
        </el-form-item>
      </div>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
    </div>
    <!---------- checkbox ------------->
    <div v-else-if="formOne.type == 'checkbox'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="formOne.is_required" @change="isSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
    </div>
    <!---------- radio ------------->
    <div v-else-if="formOne.type == 'radio'">
      <el-form-item label="标题">
        <el-input v-model="formOne.label" :name="formOne.name"></el-input>
      </el-form-item>
      <el-form-item label="是否必填" v-if="formOne.name != 'is_early_bird'">
        <el-switch v-model="formOne.is_required" @change="isSwitch"></el-switch>
      </el-form-item>
      <el-form-item label="选项">
        <div v-for="(item, index) in formOne.radioData" :key="index">
          <el-input v-model="item.name" @change="changeRadio"></el-input>
          <i class="el-icon-delete" @click.prevent="removeRadio(index)"></i>
        </div>
      </el-form-item>
      <el-form-item label="标注说明">
        <el-input v-model="formOne.description"></el-input>
      </el-form-item>
      <!-------- 除性别外，radio都可以添加选项 --------->
      <div v-if="formOne.name != 'sex'">
        <el-button type="primary" @click="addRadio">添加选项</el-button>
      </div>
    </div>
    <!---- 收费方式 ---->
    <div v-else-if="formOne.type == 'component' && formOne.name == 'is_free'">
      <el-form-item label="选择方式">
        <el-radio-group v-model="formOne.config_value">
          <el-radio
              v-for="v in formOne.data"
              :label="v"
              :key="v"
              @change="selectFee"
          ></el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <!----关联会议---->
    <div
        v-else-if="
        formOne.type == 'component' && formOne.name == 'is_associated_meeting'
      "
    >
      <el-form-item label="会议">
        <el-select
            v-model="formOne.value"
            filterable
            placeholder="请选择"
            @change="chooseMeeting"
        >
          <el-option
              v-for="item in formOne.data"
              :key="item.value"
              :label="item.label"
              :value="item.label"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <!--------- 早鸟价 ----------->
    <div
        v-else-if="formOne.type == 'component' && formOne.name == 'is_early_bird'"
    >
      <el-form-item label="早鸟价">
        <el-input
            v-model="formOne.data.discount"
            placeholder="请输入数字"
        ></el-input>
      </el-form-item>
      <div class="early_bird">早鸟价时间段</div>
      <el-date-picker
          v-model="formOne.data.period"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 20px"
          value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
    </div>
    <!----关联住宿---->
    <div v-else-if="formOne.type == 'component' && formOne.name == 'is_stay'">
      <el-container style="height: 700px; border: 1px solid #eee">
        <el-main>
          <div
              v-for="(it, idx) in formOne.data"
              :key="idx"
              style="margin-top: 10px"
          >
            <el-alert type="info" @close="remove(it, idx)">
              <el-form-item label="日期">
                <!-- <el-input v-model="it.dayTime"></el-input> -->
                <el-date-picker
                    v-model="it.dayTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="单间">
                <el-form-item label="房间数">
                  <el-input v-model="it.nameOne.roomNum"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                  <el-input v-model="it.nameOne.roomPrice"></el-input>
                </el-form-item>
              </el-form-item>
              <el-form-item label="标间">
                <el-form-item label="房间数">
                  <el-input v-model="it.nameTwo.roomNum"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                  <el-input v-model="it.nameTwo.roomPrice"></el-input>
                </el-form-item>
              </el-form-item>
            </el-alert>
            <div style="display: none" :v-model="(it.array = idx)"></div>
          </div>
          <el-button type="primary" @click="addStay">增加住宿天数</el-button>
        </el-main>
      </el-container>
    </div>
    <!------报名人数------->
    <div
        v-else-if="formOne.type == 'component' && formOne.name == 'signup_num'"
    >
      <el-form-item label="报名人数配置" label-width="100px">
        <el-input v-model="formOne.config_value"></el-input>
      </el-form-item>
    </div>
    <!---发票类型--->
    <div v-if="formOne.type == 'component' && formOne.name == 'is_invoice'">
      <el-form-item :label="formOne.label">
        <div v-for="(it, idx) in formOne.data" :key="idx">
          <el-form-item :label="it.label">
            <el-input
                v-model="it.value"
                :name="formOne.name"
                :disabled="it.is_disabled"
                :placeholder="it.placeholder"
            ></el-input>
          </el-form-item>
        </div>
      </el-form-item>
    </div>
    <!-- 配置信息 -->

    <div v-else-if="formOne.type == 'component' && formOne.name == 'is_config'">
      <el-container style="height: 700px; border: 1px solid #eee">
        <el-main>
          <div v-for="(it, idx) in formOne.data" :key="idx">
            <el-form-item
                :label="it.label"
                v-if="it.type == 'input' && it.name == 'title'"
            >
              <el-input
                  v-model="it.value"
                  placeholder="请填写活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item
                :label="it.label"
                v-if="it.type == 'input' && it.name == 'meet_free'"
            >
              <el-input
                  v-model="it.value"
                  type="number"
                  placeholder="填写会务费"
              ></el-input>
            </el-form-item>
            <el-form-item
                label="活动banner图"
                v-if="it.type == 'upload'"
                label-width="100px"
            >
              <el-image
                  v-if="it.value"
                  :src="it.value"
                  fit="scale-down"
                  style="width: 130px; height: 130px"
                  :preview-src-list="qpurlList"
              ></el-image>
              <UploadImage @urlChange="(e) => urlChange(e, 1)" />
            </el-form-item>
            <el-form-item label="活动时间" v-if="it.type == 'datePicker'">
              <el-date-picker
                  v-model="it.value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH-mm-ss"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="活动说明" v-if="it.type == 'textarea'">
              <Editor @valuechange="valuechange" :passvalue="it.value"></Editor>
            </el-form-item>
          </div>
        </el-main>
      </el-container>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "FormEdit",
  props: ['formOne'],
  data(){
    return {
      form: {
        introduce: "",
      },
      qpurlList: [],
    }
  },
  created() {

  },
  methods: {
    addStay() {
      //增加住宿天数

      var obj = {
        dayTime: "", //日期
        nameOne: [], //单间
        nameTwo: [], //标间{roomNum:"",roomPrice:""}
        nameThree: [], //拼住
      };
      this.formOne.data.push(obj);
    },
    remove(item, index) {
      //住宿删除
      let data = this.formOne;
      data.data.splice(index, 1);
    },
    urlChange(e, index) {
      switch (index) {
        case 1:
          this.formOne.data[1].value = e.data.ret;
          break;
        default:
          break;
      }
    },
    valuechange(e) {
      console.log(e.value, "eee");
      this.formOne.data[4].value = e.value;
      // console.log(this.formOne.data[4], "数据");
    },
    selectFee(e) {
      console.log(e);
      this.formOne.config_value = e;
    },
    chooseMeeting(e) {
      // console.log(this.formOne.data);
      this.formOne.data.some((item) => {
        if (item.label == e) {
          console.log(item.id + item.label);
          this.formOne.data.itemId = item.id;
          this.formOne.config_value = item.id;
        }
      });
    },
    //删除选项
    removeRadio(index) {
      this.formOne.radioData.splice(index, 1);
      this.formOne.data.splice(index, 1);
    },

    //改变radio选项内的值触发
    changeRadio() {
      let data = this.formOne.radioData;
      let arr = [];
      data.some((item, index) => {
        arr[index] = item.name;
      });
      this.formOne.data = arr;
      console.log(arr);
    },
    //添加单选按钮
    addRadio() {
      let num = this.formOne.data.length + 1;
      this.formOne.data.push("选项" + num);
      //同步新增选择input
      let arr = [];
      for (let i = 0; i < this.formOne.data.length; i++) {
        arr.push({ name: this.formOne.data[i] });
      }
      console.log(arr);
      this.formOne.radioData = arr;
      console.log(this.formOne);
    },
    //调控是否必填功能
    isSwitch() {
      let data = this.formOne;
      if (data.is_required == true || data.is_required == "true") {
        this.formOne.required = { required: true };
        this.formOne.is_required = true;
      } else {
        this.formOne.required = { required: false };
        this.formOne.is_required = false;
      }
    },
  },
}
</script>

<style scoped>
.early_bird {
  font-size: 14px;
  margin: 10px 0 10px 25px;
}
</style>
